<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="_fragments :: head(~{::title})">
  <title>归档</title>
</head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
  .clear {
    clear: both
  }

  .timeline-box {
    background: #fff;
    padding: 20px 8px;
    position: relative;
    opacity: 0.7;
  }

  .timeline-main {
    position: relative;
  }

  .timeline-main>h1 {
    font-size: 18px;
    background: #fff;
    z-index: 1;
    position: relative;
    color: #484348;
    margin-left: 33%;
    margin-left: -moz-calc(35% - 7px);
    margin-left: -webkit-calc(35% - 7px);
    margin-left: calc(35% - 7px)
  }

  .timeline-main>h1>i {
    padding-right: 10px;
    font-size: 20px
  }

  .timeline-main>h1>span {
    display: none
  }

  .timeline-main h2,
  .timeline-main h3 {
    width: 31%;
    text-align: right
  }

  .timeline-main h2,
  .timeline-main h2>a {
    font-size: 16px;
    margin: 5px 0;
    color: #6bc30d
  }

  .timeline-main h3,
  .timeline-main h3>a {
    font-size: 14px;
    margin: 2px 0;
    color: #ff5722
  }

  .timeline-month>ul>li {
    padding: 10px 0
  }

  .timeline-month>ul>li .h4 {
    display: inline-block;
    width: 31%;
    text-align: right;
    float: left
  }

  .date {
    display: inline-block;
    padding: 2px 5px;
    color: #484348;
    font-size: 15px;
    margin-top: 5px
  }

  .dot-circle {
    color: #484348;
    width: 8%;
    text-align: center;
    font-size: 22px;
    z-index: 1;
    position: relative;
    background: #fff;
    float: left
  }

  .content {
    max-width: 50%;
    float: left;
    padding: 20px;
    margin-left: 10px;
    position: relative;
    z-index: 1;
    background: #484348;
    color: #fff
  }

  .content img {
    width: 100%
  }

  .content::before {
    position: absolute;
    left: -20px;
    top: 6px;
    height: 0;
    width: 0;
    content: '';
    border: 10px solid rgba(255, 255, 255, 0);
    border-top: 6px solid rgba(255, 255, 255, 0);
    border-bottom: 6px solid rgba(255, 255, 255, 0);
    border-right-color: #484348
  }

  .timeline-line {
    position: absolute;
    left: 35%;
    top: 0;
    height: 100%;
    width: 2px;
    background: #484348;
    z-index: 0
  }

  .timeline-year {
    margin: 10px 0
  }

  @media(min-width:768px) {
    .timeline-box {
      background: #fff;
      padding: 40px 15px;
      position: relative;
    }

    .timeline-main>h1 {
      font-size: 26px;
      margin-left: 16%;
      margin-left: -moz-calc(18% - 13px);
      margin-left: -webkit-calc(18% - 13px);
      margin-left: calc(18% - 13px)
    }

    .timeline-main>h1>i {
      font-size: 30px
    }

    .timeline-main>h1>span {
      display: inline
    }

    .timeline-main h2,
    .timeline-main h3 {
      width: 16%
    }

    .timeline-main h2,
    .timeline-main h2>a {
      font-size: 24px
    }

    .timeline-main h3,
    .timeline-main h3>a {
      font-size: 20px
    }

    .timeline-month>ul>li .h4 {
      width: 16%
    }

    .dot-circle {
      width: 4%;
      font-size: 22px
    }

    .content {
      max-width: 70%
    }

    .timeline-line {
      left: 18%
    }
  }

  @media(min-width:992px) {
    .timeline-main>h1 {
      font-size: 34px;
      background: #fff;
      z-index: 1;
      position: relative;
      color: #484348;
      margin-left: 17%;
      margin-left: -moz-calc(18% - 16px);
      margin-left: -webkit-calc(18% - 16px);
      margin-left: calc(18% - 16px)
    }

    .timeline-main>h1>i {
      font-size: 36px
    }

    .timeline-main h2,
    .timeline-main h2>a {
      font-size: 30px
    }

    .timeline-main h3,
    .timeline-main h3>a {
      font-size: 24px
    }
  }
</style>
<body>
  <!-- 导航 -->
  <nav th:replace="_fragments :: menu(4)"></nav>

  <!-- 中间部分 -->
  <div class="m-padded-td-big">
    <div class="ui container">
      <div class="ui stackable grid">

        <!-- 左边5份布局(右边top) -->
        <div class="five wide column animate__animated animate__fadeInLeft ">
          <div class="ui segments m-margin-tb-large">
            <div class="ui secondary segment m-black" style="margin-top: -30px">
              <i class="time icon"></i>归档年份
            </div>
            <div class="ui segment">
              <div  class="ui segment" th:each="year :${yearList}">
                <a href="#" onclick="changeYear(this)"  th:yearValue="${year.year}"  class="m-black m-text-thin" style="text-decoration: none;">
                  <span  style="font-weight: bolder" th:text="${year.year}"></span>年 (<span style="font-weight: lighter " th:text="${year.blogCount}"></span>篇)

                </a>
              </div>
            </div>
          </div>
        </div>

        <!-- 右边11份布局(博客列表) -->
        <div id="archiveYear-container" class="eleven wide column animate__animated animate__fadeInRight">
          <div th:fragment="archiveList">
            <div class="timeline-box shadow">
              <div class="timeline-main">
                <h1><i class="fa fa-clock-o"></i>时间轴 — 记录我们的点点滴滴</h1>


                <div class="timeline-line"></div>


                <div class="timeline-year">
                  <h2><a class="yearToggle">[[${year}]] 年</a><i class="fa fa-caret-down fa-fw"></i></h2>
                  <div class="timeline-month">
                    <ul>
                      <li th:each="blog : ${blogList}">
                        <div class="h4 animated fadeInLeft">
                          <p class="date">[[${#dates.format(blog.createTime,'yyyy-MM-dd')}]]</p>
                        </div>
                        <p class="dot-circle animated "><i class="fa fa-dot-circle-o"></i></p>


                          <div class="content animated fadeInRight">
                            <a th:href="@{'/getBlogById/' + ${blog.id}}" style="color: white;text-decoration: none;">
                            [[${blog.title}]]
                            </a>
                            <br>
                            <br><i class="user icon"></i> [[${blog.user.nikeName}]] &nbsp;&nbsp;&nbsp; <i class="eye icon"></i> [[${blog.views}]]
                            &nbsp;&nbsp;&nbsp;<div class="ui green  label" th:text="${blog.flag}">原创</div>
                          </div>


                        <div class="clear"></div>
                      </li>
                    </ul>
                  </div>
                </div>


                <h1 style="padding-top:4px;padding-bottom:2px;margin-top:40px;"><i class="fa fa-hourglass-end"></i>THE END</h1>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <br>
    <br>

  </div>

  <!-- 底部footer -->
  <footer th:replace="_fragments :: footer"></footer>




  <script type='text/javascript'>
    $('.menu.toggle').click(function () {
      // toggleClass：像开关一样的方法，如果开着就关了，如果关了，就开着
      $('.m-item').toggleClass('m-mobile-hide');
    });

    $('#editBlog').click(function() {
      var isLogin = $('#isLogin').text()

      if (Object.keys(isLogin).length === 0) {
        layer.alert('请先登录')
        // window.location.href = "/login"
      } else {
        window.location.href = "/blog/goEditBlogPage"
      }
    })

    // $('#year').click(function () {
    //   alert('111')
    //   $('archiveYear-container').load('/archives/getBlogListByYear/')
    // })

    function changeYear(obj) {
     var year =  $(obj).attr('yearValue')
      $('#archiveYear-container').load('/archives/getBlogListByYear/' + year)
    }

  </script>
</body>

</html>